import QtQuick 2.0
import "."
import "QChart.js"        as Charts
import "QChartGallery.js" as ChartsData
import QtQuick.Window 2.2
Window{
    id: win
    visible: true
    width: 1024
    height: 600
    title: qsTr("POCT")
    property int chart_width: 330;
    property int chart_height: 300;
    property int chart_spacing: 20;
    property int text_height: 80;
    property int row_height: 8;
    Rectangle {
        color: "#ffffff";
        width: chart_width*3 + 2*chart_spacing;
        height: chart_height*2 + chart_spacing + 2*row_height + text_height;

        ///////////////////////////////////////////////////////////////////
        // 顶部的装饰色块、刷新按钮
        ///////////////////////////////////////////////////////////////////
        Rectangle { color: "#282b36"; width: parent.width/1.0; height: row_height; }
        Rectangle { color: "#f33e6f"; width: parent.width/3.0; height: row_height; x: 0*width; y: height; }
        Rectangle { color: "#46bfbd"; width: parent.width/3.0; height: row_height; x: 1*width; y: height; }
        Rectangle { color: "#fbd45c"; width: parent.width/3.0; height: row_height; x: 2*width; y: height; }

        Text {
            y: 2*row_height;
            width: parent.width;
            height: text_height;
            text: "POCT";
            font.pointSize: 32;
            horizontalAlignment: Text.AlignHCenter;
            verticalAlignment: Text.AlignVCenter;

            // 刷新按钮
            Rectangle {
                id: button;
                anchors.top:  parent.top;
                anchors.topMargin: (parent.height-parent.font.pointSize)/2;
                anchors.right: parent.right;
                anchors.rightMargin: (parent.height-parent.font.pointSize)/2;
                width: 100;
                height: 32;
                color: "#2d91ea";
                radius: 8;

                Text {
                    anchors.centerIn: parent;
                    color: "#ffffff";
                    text: "重置";
                    font.bold: true;
                }

                MouseArea {
                    anchors.fill: parent;
                    onPressed: {
                        button.color = "#1785e6"
                    }
                    onReleased: {
                        button.color = "#2d91ea"
                        chart_line.repaint();

                    }
                }
            }


        }
        Text {
            x:740
            y:40
            text: "X: "+chart_line.xMinDiffPoint+"<br/>Y: "+chart_line.yMinDiffPoint
            font.bold: true
        }


        QChart {
            id: chart_line;
            anchors.horizontalCenter: parent.horizontalCenter
            width: 900;
            height: 400;
            y: 2*row_height + text_height;
            chartAnimated: false;
            chartAnimationEasing: Easing.InOutElastic;
            chartAnimationDuration: 1000;
            chartData: ChartsData.ChartLineData;
            chartType: Charts.ChartType.LINE;
        }


    }

}


